<template>
  <div class="cpsy_chil_box">
    <div class="top_tit">
      <span class="act_xx">当前型号: <span class="red">{{$parent.cpsy_value.XL}}</span> </span>
      <span class="act_xx">当前品牌: <span class="red">{{$parent.cpsy_value.SCCJC}}</span> </span>
    </div>
    <div class="cpsy_tk_top">
      <div class="left_sear">
        <a-input placeholder="型号" style="width: 200px" v-model="xl" @change="onSearchxl" />
        <a-input placeholder="品牌" style="width: 200px" v-model="sccjc" @change="onSearchpp" />
      </div>
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
    </div>
    <a-table
      :columns="columns"
      :dataSource="data"
      :pagination="pagination"
      @change="getkucunGetSpbmList"
    >
      <!-- <template slot="ppzt" slot-scope="text, record, index">
        <a-tag color="#ff3040" v-if="record.spbm==null?true:false">未匹配</a-tag>
        <a-tag color="#87d068" v-if="record.spbm!=null?true:false">已匹配</a-tag>
      </template> -->
      <template slot="operation" slot-scope="text, record, index">
        <a href='javascript:;' class="del" @click="confirm(record)">确认</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import qs from "qs";
const columns = [
  {
    title: "型号",
    dataIndex: "xl"
  },
  {
    title: "品牌",
    dataIndex: "sccjc"
  },
  // {
  //   title: "标准商品名称",
  //   dataIndex: "spbm"
  // },
//   {
//     title: "匹配状态",
//     dataIndex: "ppzt",
//     scopedSlots: { customRender: "ppzt" }
//   },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
export default {
  data() {
    return {
      data,
      columns,
      pagination: {
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      xl: this.$parent.cpsy_value.XL,
      sccjc: "",
      spbm: ""
    };
  },

  methods: {
    getkucunGetSpbmList(pagination, spbm, xl, sccjc) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          "kucunSpbm/kucunGetSpbmList.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: pagination.defaultPageSize,
            spbm: this.spbm,
            xl: this.xl,
            sccjc: this.sccjc,
            num: 100
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.pagination.total = Number(res.data.result.total);
            for (var i = 0; i < res.data.result.data.length; i++) {
              res.data.result.data[i].key = i;
            }
            this.data = res.data.result.data;
          }else{
             this.data = []
          }
        });
    },
    close() {
      this.$parent.cpsytkflag = false;
    },
    onSearchxl() {
      this.pagination.current = 1;
      this.getkucunGetSpbmList(this.pagination, this.spbm, this.xl, this.sccjc);
    },
    onSearchpp() {
      this.pagination.current = 1;
      this.getkucunGetSpbmList(this.pagination, this.spbm, this.xl, this.sccjc);
    },
    // onSearchspbm() {
    //   this.pagination.current = 1;
    //   this.getkucunGetSpbmList(this.pagination, this.spbm, this.xl, this.sccjc);
    // },
    confirm(value){
        this.axios.post("kucunSpbm/kucunSpbmEdit.php",qs.stringify({
            id_num:this.$parent.cpsy_value.ID_NUM,
            sqdwid:this.$store.state.bbl_sqdwid,
            xl:this.$parent.cpsy_value.XL,
            sccjc:this.$parent.cpsy_value.SCCJC,
            spbm:value.spbm
        })).then(res=>{
            console.log(res)
              if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
             this.$parent.cpsytkflag=false
              this.$parent.handleChangelist(this.$parent.pagination);
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        })
    }
  },

  created() {
    this.getkucunGetSpbmList(this.pagination);
  }
};
</script>

<style lang='less'>
.cpsy_chil_box {
    width: 63%;
    max-height: 65%;
    background: #fff;
    position: absolute;
    left: 20%;
    top: 5%;
    text-align: left;
    padding: 20px;
  .act_xx {
    margin-right: 20px;
  }
   .red{
      color: #c00;
  }
}
@media (max-width: 1508px) {
  .cpsy_chil_box{
    overflow-y: scroll;
    max-height: 50%;

  }
}
.cpsy_tk_top {
  .left_sear {
    padding: 25px 0;
    input {
      margin-right: 20px;
    }
  }
 
}
</style>
